<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>观察者模式</title>
    <style></style>
  </head>
  <body>
    <div>
      <p>观察者(订阅者)-Watcher</p>
      <p>update():当事件发生时,具体要做的事情</p>
      <p>目标(发布者)-Dep</p>
      <p>subs数组:存储所有的观察者</p>
      <p>addSub():添加观察者</p>
      <p>notify:当事件发生,调用所有观察者的update()方法</p>
      <p>没有事件中心(与发布订阅者不同)</p>
    </div>
    <script>
      //模拟观察者模式
      class Dep {
        constructor() {
          //记录所有订阅者,数组的形式
          this.subs = [];
        }
        //添加订阅者方法
        addSub(sub) {
          //判断对象是否存在并且具有update方法
          if (sub && sub.update) {
            this.subs.push(sub);
          }
        }
        //事件发生通知所有的订阅者,调用所有订阅者的update方法
        notify() {
          this.subs.forEach((sub) => {
            //调用update方法
            sub.update();
          });
        }
      }
      //发布者-目标
      //订阅者-观察者
      class Watcher {
        //该方法由发布者调用《更新视图或者其他方法
        update() {
          console.log("update");
        }
      }

      //测试
      let dep = new Dep();
      let watcher = new Watcher();
      dep.addSub(watcher);
      dep.notify();
    </script>
  </body>
</html>
